<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>NIIT Bootstrap Template</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <link href="../css/style.css" rel="stylesheet">
    <!-- 导航和页脚依赖的css -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <style>
        .breadcrumb-item + .breadcrumb-item::before{
            content: ">";
        }
    </style>
</head>

<body>
    <!-- ======= Header ======= -->
    <nav class="navbar navbar-expand-md bg-dark navbar-dark ">
        <h1 class="text-light">NIIT</h1>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#" class="nav-link">首页</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">关于</a>
                </li>
                <!-- 导航栏内实现下拉菜单 -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">联系方式</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">邮箱</a>
                        <a href="#" class="dropdown-item">手机</a>
                        <a href="#" class="dropdown-item">微信</a>
                    </div>
                </li>
            </ul>
            <button type="button" class="btn btn-outline-success">登录</button>
    </nav>
    <!-- End Header -->
    <main class="container">
        <div class="row mt-2">
            <div class="col-md-3">
                <nav>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">首页</a></li>
                        <li class="breadcrumb-item"><a href="#">课程</a></li>
                        <li class="breadcrumb-item actice">大数据</li>
                    </ol>
                </nav>
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <!-- .streched-link让任何HTML元素变为可点击元素，超链接变为绿色 -->
                        <a href="#" class="streched-link">待发货</a>
                        <span class="badge badge-primary badge-pill">6</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="#" class="streched-link">待收货</a>
                        <span class="badge badge-primary badge-pill">16</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="#" class="streched-link">待评价</a>
                        <span class="badge badge-primary badge-pill">9</span>
                    </li>
                </ul>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-lg-4 col-md-6 mt-2">
                        <img src="../images/portfolio-2.jpg" class="img-fluid">
                        <h6 class="text-center">手表</h6>
                        <p class="text-center">￥199</p>
                        <a href="../images/portfolio-2.jpg" class="btn btn-light btn-block">查看详情</a>
                        <a href="#" class="btn btn-dark btn-block">加入购物车</a>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-2">
                        <img src="../images/portfolio-2.jpg" class="img-fluid">
                        <h6 class="text-center">手表</h6>
                        <p class="text-center">￥199</p>
                        <a href="../images/portfolio-2.jpg" class="btn btn-light btn-block">查看详情</a>
                        <a href="#" class="btn btn-dark btn-block">加入购物车</a>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-2">
                        <img src="../images/portfolio-2.jpg" class="img-fluid">
                        <h6 class="text-center">手表</h6>
                        <p class="text-center">￥199</p>
                        <a href="../images/portfolio-2.jpg" class="btn btn-light btn-block">查看详情</a>
                        <a href="#" class="btn btn-dark btn-block">加入购物车</a>
                    </div>

                </div>
            </div>
        </div>

    </main>
    <!-- End #main -->
    <!-- ======= Footer ======= -->
    <!-- class="footer fixed-bottom container" -->
    <footer id="footer" class="container fixed-bottom">
        <div class="row p-1">
            <div class="col text-left">
                <div>
                    &copy; Copyright
                    <strong>
                        <span>NIIT</span>
                        </strclass="min-vh-100"ong>. All Rights Reserved
                </div>
                <div>
                    Designed by NIIT
                </div>
            </div>
            <div class="col text-right">
                <div>
                    <address>
                        <strong>Trinity Organic</strong>
                        , Shanghai 23839,
                        <abbr title="Phone">P:</abbr> (123) 456-7890 <br>
                        <strong>Contact Details</strong>:
                        <a href="mailto:#">info@Trinityorganic.com</a>
                    </address>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>